﻿@page "/chart/funnel"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart'>Blazor Funnel Chart</a> example demonstrates funnel chart for Project Cost Breakdown. Datalabel shows the information about the points.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the funnel chart. The labels are smartly arranged to avoid overlapping. The <code>Neck Width</code> and <code>Neck Height</code> of the funnel chart can also be adjusted.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the funnel series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/funnel/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div class="control-section">
        <SfAccumulationChart Title="Top populated countries in 2017" EnableAnimation="false" Theme="@Theme">
            <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>

            <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>

            <AccumulationChartSeriesCollection>
                <AccumulationChartSeries DataSource="@FunnelChartPoints" XName="Country" YName="Population"
                                         Type="AccumulationType.Funnel" Explode="false" NeckWidth="@NeckWidth" NeckHeight="@NeckHeight">
                    <AccumulationDataLabelSettings Visible="true" Name="Country" Position="AccumulationLabelPosition.Outside">
                        <AccumulationChartConnector Length="6%"></AccumulationChartConnector>
                    </AccumulationDataLabelSettings>
                </AccumulationChartSeries>
            </AccumulationChartSeriesCollection>
        </SfAccumulationChart>
    </div>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Neck Width:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div data-role="rangeslider">
                            <input type="range" @onchange="ChangeNeckWidth" value="@neckWidthRangeValue" min="0" max="50" style="width:90%" />
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div data-role="rangeslider">
                            <p style="font-weight: normal;padding-top:10px;"><span>@neckWidthRangeValue</span></p>
                        </div>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Neck Height:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div data-role="rangeslider">
                            <input type="range" @onchange="ChangeNeckHeight" value="@neckHeightRangeValue" min="0" max="50" style="width:90%" />
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div data-role="rangeslider">
                            <p style="font-weight: normal;padding-top:10px;"><span>@neckHeightRangeValue</span></p>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Theme Theme { get; set; }
    public string NeckWidth = "10%", NeckHeight = "18%";
    public List<FunnelData> FunnelChartPoints { get; set; } = new List<FunnelData>
    {
        new FunnelData { Country = "China", Population = 1409517397 },
        new FunnelData { Country = "India", Population = 1339180127 },
        new FunnelData { Country = "United States", Population = 324459463 },
        new FunnelData { Country = "Indonesia", Population = 263991379  },
        new FunnelData { Country = "Brazil", Population = 209288278 },
        new FunnelData { Country = "Pakistan", Population = 197015955 },
        new FunnelData { Country = "Nigeria", Population = 190886311 },
        new FunnelData { Country = "Bangladesh", Population = 164669751 },
        new FunnelData { Country = "Russia", Population = 143989754 },
        new FunnelData { Country = "Mexico", Population = 129163276 },
        new FunnelData { Country = "Japan", Population = 127484450 },
        new FunnelData { Country = "Ethiopia", Population = 104957438 },
        new FunnelData { Country = "Philippines", Population = 104918090 },
        new FunnelData { Country = "Egypt", Population = 97553151 },
        new FunnelData { Country = "Vietnam", Population = 95540800 },
        new FunnelData { Country = "Germany", Population = 82114224 },
    };
    private int neckWidthRangeValue = 10, neckHeightRangeValue = 18;

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private void ChangeNeckWidth(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        neckWidthRangeValue = Convert.ToInt32(args.Value);
        NeckWidth = neckWidthRangeValue + "%";
    }

    private void ChangeNeckHeight(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        neckHeightRangeValue = Convert.ToInt32(args.Value);
        NeckHeight = neckHeightRangeValue + "%";
    }

    public class FunnelData
    {
        public string Country { get; set; }
        public double Population { get; set; }
    }
}

